<template>
  <div class="layout-card">
    <div class="form-demo">
      <div class="text-h6">表单组件示例</div>

      <!-- 输入框样式展示 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">输入框样式</div>
          <div class="row q-col-gutter-md">
            <!-- 基础输入框 -->
            <div class="col-12 col-sm-4">

                <q-input placeholder="Enter your username"  class="custom-input"   :float-label="false" v-model="text"  dense />


            </div>
            <!-- 带图标输入框 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="text" label="带图标" dense>
                <template v-slot:prepend>
                  <q-icon name="person" />
                </template>
              </q-input>
            </div>
            <!-- 轮廓式输入框 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="text" label="轮廓式" outlined dense />
            </div>
            <!-- 填充式输入框 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="text" label="填充式" filled dense />
            </div>
            <!-- 圆角输入框 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="text" label="圆角" rounded outlined dense />
            </div>
            <!-- 带底边输入框 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="text" label="带底边" borderless dense />
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- 选择器样式展示 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">选择器样式</div>
          <div class="row q-col-gutter-md">
            <!-- 基础选择器 -->
            <div class="col-12 col-sm-4">
              <q-select v-model="select" :options="options" label="基础选择器" dense />
            </div>
            <!-- 多选选择器 -->
            <div class="col-12 col-sm-4">
              <q-select
                v-model="multiSelect"
                :options="options"
                label="多选选择器"
                multiple
                dense
              />
            </div>
            <!-- 使用芯片的选择器 -->
            <div class="col-12 col-sm-4">
              <q-select
                v-model="multiSelect"
                :options="options"
                label="芯片选择器"
                multiple
                use-chips
                dense
              />
            </div>
            <!-- 带图标选择器 -->
            <div class="col-12 col-sm-4">
              <q-select v-model="select" :options="options" label="带图标" dense outlined>
                <template v-slot:prepend>
                  <q-icon name="list" />
                </template>
              </q-select>
            </div>
            <!-- 菜单样式选择器 -->
            <div class="col-12 col-sm-4">
              <q-select
                v-model="select"
                :options="options"
                label="菜单样式"
                menu-shrink
                filled
                dense
              />
            </div>
            <!-- 带标签的选择器 -->
            <div class="col-12 col-sm-4">
              <q-select v-model="select" :options="optionsWithIcon" label="带标签" dense outlined>
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section avatar>
                      <q-icon :name="scope.opt.icon" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>{{ scope.opt.label }}</q-item-label>
                      <q-item-label caption>{{ scope.opt.description }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- 日期时间选择器样式 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">日期时间选择器</div>
          <div class="row q-col-gutter-md">
            <!-- 基础日期选择 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="date" label="基础日期" dense>
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                      <q-date v-model="date" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <!-- 范围日期选择 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="dateRangeDisplay" label="日期范围" dense readonly>
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                      <q-date v-model="dateRange" range @update:model-value="updateDateRange" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <!-- 时间选择 -->
            <div class="col-12 col-sm-4">
              <q-input v-model="time" label="时间选择" dense>
                <template v-slot:append>
                  <q-icon name="access_time" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                      <q-time v-model="time" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- 单选多选样式 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">单选多选样式</div>
          <div class="row q-col-gutter-md">
            <!-- 基础单选 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">基础单选</div>
              <q-option-group v-model="radio" :options="radioOptions" color="primary" inline />
            </div>
            <!-- 按钮样式单选 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">按钮样式单选</div>
              <q-btn-toggle
                v-model="toggleBtn"
                :options="btnOptions"
                color="primary"
                toggle-color="primary"
                rounded
                unelevated
              />
            </div>
            <!-- 基础多选 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">基础多选</div>
              <q-option-group
                v-model="checkbox"
                :options="checkboxOptions"
                type="checkbox"
                color="primary"
                inline
              />
            </div>
            <!-- 切换开关 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">切换开关样式</div>
              <div class="row q-gutter-sm">
                <q-toggle v-model="toggle1" label="默认开关" />
                <q-toggle v-model="toggle2" color="green" label="绿色" />
                <q-toggle v-model="toggle3" color="red" label="红色" />
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- 评分和滑块样式 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">评分和滑块</div>
          <div class="row q-col-gutter-md">
            <!-- 评分样式 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">评分样式</div>
              <div class="row q-gutter-y-md">
                <div class="col-12">
                  <q-rating v-model="rating1" size="2em" color="primary" />
                </div>
                <div class="col-12">
                  <q-rating
                    v-model="rating2"
                    size="2em"
                    color="yellow"
                    icon="star_border"
                    icon-selected="star"
                  />
                </div>
                <div class="col-12">
                  <q-rating
                    v-model="rating3"
                    size="2em"
                    color="red"
                    icon="favorite_border"
                    icon-selected="favorite"
                  />
                </div>
              </div>
            </div>
            <!-- 滑块样式 -->
            <div class="col-12 col-sm-6">
              <div class="text-caption q-mb-sm">滑块样式</div>
              <div class="row q-gutter-y-md">
                <div class="col-12">
                  <q-slider v-model="slider1" :min="0" :max="100" label />
                </div>
                <div class="col-12">
                  <q-slider v-model="slider2" :min="0" :max="100" label label-always color="teal" />
                </div>
                <div class="col-12">
                  <q-range v-model="range" :min="0" :max="100" label color="purple" />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- 文件上传样式 -->
      <q-card class="q-mb-md">
        <q-card-section>
          <div class="text-subtitle1 q-mb-md">文件上传</div>
          <div class="row q-col-gutter-md">
            <!-- 基础上传 -->
            <div class="col-12 col-sm-4">
              <q-file v-model="file1" label="基础上传" outlined dense>
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
            <!-- 带预览的上传 -->
            <div class="col-12 col-sm-4">
              <q-file v-model="file2" label="图片上传" outlined dense accept="image/*">
                <template v-slot:prepend>
                  <q-icon name="add_photo_alternate" />
                </template>
                <template v-slot:after v-if="file2">
                  <q-avatar>
                    <img :src="URL.createObjectURL(file2)" />
                  </q-avatar>
                </template>
              </q-file>
            </div>
            <!-- 多文件上传 -->
            <div class="col-12 col-sm-4">
              <q-file v-model="files" label="多文件上传" outlined dense multiple counter>
                <template v-slot:prepend>
                  <q-icon name="attachment" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <q-card class="q-mb-md">
        <CascaderDemo />
      </q-card>
    </div>
  </div>
</template>

<script setup>
import CascaderDemo from '@/components/CascaderDemo.vue'
import { ref, computed } from 'vue'

// 输入框
const text = ref('')

// 选择器
const select = ref(null)
const multiSelect = ref([])
const options = ['选项1', '选项2', '选项3', '选项4', '选项5']
const optionsWithIcon = [
  {
    label: '选项1',
    value: 1,
    icon: 'star',
    description: '这是选项1的描述',
  },
  {
    label: '选项2',
    value: 2,
    icon: 'favorite',
    description: '这是选项2的描述',
  },
  {
    label: '选项3',
    value: 3,
    icon: 'bookmark',
    description: '这是选项3的描述',
  },
]

// 日期时间
const date = ref('')
const dateRange = ref({ from: '', to: '' })
const time = ref('')

// 计算日期范围显示值
const dateRangeDisplay = computed(() => {
  if (dateRange.value.from && dateRange.value.to) {
    return `${dateRange.value.from} - ${dateRange.value.to}`
  }
  return ''
})

// 更新日期范围
const updateDateRange = (val) => {
  dateRange.value = val
}

// 单选多选
const radio = ref('opt1')
const toggleBtn = ref('opt1')
const checkbox = ref([])
const radioOptions = [
  { label: '选项1', value: 'opt1' },
  { label: '选项2', value: 'opt2' },
  { label: '选项3', value: 'opt3' },
]
const btnOptions = [
  { label: '选项1', value: 'opt1' },
  { label: '选项2', value: 'opt2' },
  { label: '选项3', value: 'opt3' },
]
const checkboxOptions = [
  { label: '选项1', value: 'opt1' },
  { label: '选项2', value: 'opt2' },
  { label: '选项3', value: 'opt3' },
]

// 开关
const toggle1 = ref(false)
const toggle2 = ref(false)
const toggle3 = ref(false)

// 评分
const rating1 = ref(3)
const rating2 = ref(3)
const rating3 = ref(3)

// 滑块
const slider1 = ref(50)
const slider2 = ref(50)
const range = ref({
  min: 30,
  max: 70,
})

// 文件上传
const file1 = ref(null)
const file2 = ref(null)
const files = ref(null)
</script>

<style lang="scss" scoped>
.custom-input .q-field__control {
  border-radius: 8px;
  border: 1px solid #dcdfe6; /* 修改边框颜色 */
  padding: 10px; /* 控制内边距 */
}

.custom-input .q-field__label {
  font-size: 14px;
  color: #606266; /* 修改标签颜色 */
}

.custom-input .q-placeholder {
  color: #a0a0a0; /* 修改 placeholder 颜色 */
}

.custom-input .q-field__control:focus {
  border-color: #409eff; /* 聚焦时改变边框颜色 */
}
.form-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .q-card {
    margin-bottom: 20px;
  }

  :deep(.q-field) {
    .q-field__control {
      height: 40px;
    }
  }
}
</style>
